import React, { useState, useEffect } from 'react';
import './index.less';
import CommonHead from '@/components/CommonHead/CommonHead';
import { fetchItemDetail } from '@/api'
import { useSearchParams, useDispatch } from 'umi';
import { Swiper, Button, Popup, Stepper } from 'antd-mobile';
export default function Page() {
  const dispatch = useDispatch();
  const [searchParams] = useSearchParams();
  // 请求商品详情数据
  const [basicInfo, setBasicInfo] = useState<any>({});
  const [content, setContent] = useState('');
  const [pics, setPics] = useState<any[]>([]);
  const [sku, setSku] = useState({}); // 商品规格
  const getItemDetail = () => {
    fetchItemDetail({
      id: searchParams.get('id')
    }).then(res => {
      console.log(res);
      if (res.data.code === 0) {
        const { basicInfo, pics, content } = res.data.data;
        setBasicInfo(basicInfo)
        setContent(content);
        setPics(pics);
        setSku({
          ...basicInfo,
          number: 1
        })
      }
    })
  }
  // 控制商品规格弹出
  const [skuShow, setSkuShow] = useState(false);
  const [actionType, setActionType] = useState(0); // 0购物车1立即购买
  const showItemSku = (type: number) => {
    setSkuShow(true)
    setActionType(type);
  }
  // 点击弹出层确定按钮
  const onConfirm = () => {
    if(actionType=== 0){
      // 加入购物车
      dispatch({
        type: 'cart/addCart',
        params: {
          goodsId: sku.id,
          number: sku.number
        }
      })
    }else{
      alert('订单页')
    }
    setSkuShow(false)
  }
  useEffect(() => {
    getItemDetail()
  }, [])
  return (
    <div className='detail'>
      <CommonHead title={basicInfo.name || '详情页'} />
      <div className="container">
        <Swiper loop>
          {
            pics.map(banner => (
              <Swiper.Item key={banner.id}>
                <img src={banner.pic} alt="" />
              </Swiper.Item>
            ))
          }
        </Swiper>
        <h2>{basicInfo.name}</h2>
        <div className="content" dangerouslySetInnerHTML={{ __html: content }}></div>
      </div>
      <div className="action-bar">
        <Button block size='large' onClick={
          () => {
            showItemSku(0)
          }
        } color='danger'>加入购物车</Button>
        <Button block size='large' onClick={
          () => {
            showItemSku(1)
          }
        } style={{ '--background-color': '#e93323', '--text-color': '#fff' }}>立即购买</Button>
      </div>
      {/* 商品规格弹出层 */}
      <Popup
        visible={skuShow}
        onMaskClick={() => {
          setSkuShow(false)
        }}
        bodyStyle={{ height: '40vh' }}
      >
        <div className='sku-container'>
          <img src={sku.pic} alt="" />
          <div className="sku-info">
            <h5>{sku.name}</h5>
            <p>价格: ￥{sku.minPrice}</p>
            <p>购买数量{sku.number}</p>
            <Stepper
              value={sku.number}
              onChange={value => {
                setSku({
                  ...sku,
                  number: value
                })
              }}
            />
          </div>
        </div>
        <Button onClick={
          onConfirm
        } size='large' color='danger' block>确定</Button>
      </Popup>
      {/* /商品规格弹出层 */}
    </div>
  );
}
